<template>
    <div class="pages-list" id="pages-list" >
        <ul ref="box">
            <li v-for="(item,index) in pageList" :key="index" class="content-between" :class="{'li-active':pageOnlyId == item.id}" @click="clickOn(item.id)">
                <p>{{item.controls[0].text.t}}</p>
                <div class="icon-group" @click.stop>
                    <el-tooltip effect="dark" content="编辑" placement="bottom">
                        <i class="el-icon-edit-outline"></i>
                    </el-tooltip>
                    <el-tooltip effect="dark" content="复制路径" placement="bottom">
                        <i class="el-icon-copy-document"></i>
                    </el-tooltip>
                    <el-tooltip effect="dark" content="删除" placement="bottom" >
                        <i class="el-icon-delete" @click.stop="del_page(item.id)"></i>
                    </el-tooltip>
                </div>
            </li>
        </ul>
        <div class="bottom">
            <el-button class="add_page" type="primary" plain round icon="el-icon-plus" @click="add_page">新建自定义页面</el-button>
        </div>
    </div>
</template>

<script>
import $ from 'jquery'
import { mapState } from 'vuex'
export default {
    data() {
        return {}
    },
    computed:{
		...mapState(['pageList','pageOnlyId'])
    },
    methods: {
        clickOn(id){
            this.$store.commit('changePageIndex',id)
        },
        add_page(){
            var scrollHeight = this.$refs.box.scrollHeight
            this.$nextTick(()=>{
                $('#pages-list ul').animate({scrollTop:scrollHeight}, 300)
            })
            this.$store.dispatch('addPageList')
        },
        del_page(id){
            this.util.confirm('此操作将永久删除，是否继续?',() => {
                console.log('删除')
                this.$store.dispatch('delPageList',id)
            })
        }
    },
}
</script>

<style lang="scss" scoped>
.pages-list{display: flex;flex-direction: column;align-items: center;height: 100%;position: relative;
    &>ul{width: 329px;overflow-x: hidden;flex: 1;height: 0;padding: 0 19px;padding-bottom: 20px;
        li{height: 50px;background: #f7f7f7;border: 1px solid #eee;border-radius: 5px;padding: 0 12px;color: #666;font-size: 14px;margin-top: 10px;
            &.li-active{background: #ececec;cursor: pointer;border: 1px solid #cbe5ff;p{color: #409eff}}
            &:hover{background: #ececec;cursor: pointer;border: 1px solid #cbe5ff; }
            &:hover p{color: #409eff;}
            .icon-group{
                &>i{margin: 0 4px;font-size: 16px;
                    &:hover{color: #409eff;cursor: pointer;}
                }
            }
        }
    }
    .bottom{background: #fff;height: 80px;width: 100%;border-top: 1px solid #eee;
        .add_page{width: 329px;position: absolute;bottom: 20px;left: 50%; transform: translateX(-50%);}
    }
}
</style>

